Lektion 8
Seitengestaltung


  1. Grundsätzliche Regeln und Hinweise für die eigene Web-Site
  2. Tipps zur Seitenerstellung
  3. Tipps zum Seitenlayout
  4. Farbe und Gestaltung
  5. Browser und Bildschirmtest
  6. Download zum Server

    7.  
Grundsätzliche Regeln und Hinweise für die eigene Web-Site
Packen Sie sich an Ihrer eigenen Nase:
Was stört Sie auf Ihren Wegen durch das Internet? Lange Ladezeiten, Warten auf eine Grafik, die dann doch nichts darstellt? Hören Sie sich manchmal sagen "Ja wo ist denn das, ich finds nicht?".
Geduld bringen die wenigsten Seitenbesucher mit. Machen Sie also nicht die Fehler, die Sie bei anderen kritisieren.

Dieser Kurs gibt Ihnen eine Anleitung für den Einsatz von HTML. Welche Inhalte Sie präsentieren wollen und welche Zielgruppen Sie ansprechen wollen müssen Sie selbst entscheiden. Nachfolgend finden Sie eine Reihe von weiterführenden Links:
Webseiten und Bücher:

book.jpg 30x23 Online-Journalismus. Schreiben und Gestalten für das Internet.
Ein Handbuch für Ausbildung und Praxis von Gabriele Hooffacker
Die Webseite zum Buch

Die richtige Wortwahl - Mehr Umsatz mit effektiven Web-Texten
von Sascha Langner, Marke-X Internet Marketing

Kontaktdesign
Hans Karl Schmitz gibt Tipps zu Inhalten, Benutzbarkeit, Kundenfreundlichkeit.

book.jpg 30x23Erfolgreiches Webdesign von Patrick J. Lynch u.a.
Aus dem Inhalt: Vorgehensweisen, Interface-Design, Site-Design, Page-Design, Typographie, Redaktionelle Tipps, Grafiken im Web, Multimedia.

Benutzerfreundlicher Hypertext von Daniel Wollschläger, UNI Kiel

book.jpg 30x23Homepage Usability. 50 enttarnte Webseiten von Jakob Nielsen, Marie Tahir (Nielson gilt als der Usability-Guru)

Tipps zur Seitenerstellung

Wenn Sie eine Internetadresse im Browser eingeben, sieht das meist so aus: "www.adresse.de" - Die erste Seite, die damit aufgerufen wird, trägt den Namen index.html, default.html, home.html oder start.html. Überprüfen Sie anhand der Unterlagen Ihres Providers, welcher Name für die Startseite reserviert ist. Speichern Sie Ihre Startseite unter diesem Namen. Bei www.LernenImInternet.de wird automatisch die Seite index.html gestartet.

Die Startseite, die erste Seite, die ein Besucher zu sehen bekommt, vertreibt oftmals die Leute bevor die Seite vollständig geladen ist. Warum:

  • Gestalten Sie die erste Seite einfach
  • Keine grossen Grafikdateien (zu lange Ladezeit)
  • Überschütten Sie die Leute nicht gleich mit allen Informationen
  • Nichts ist schlimmer als eine Startseite mit langer Ladezeit, auf der sich am Ende eine "tolle" Grafik zeigt mit dem sehr aufschlussreichen Wort Willkommen.
Binden Sie auf allen weiteren Seiten Grafik mit Bedacht ein. Lange Ladezeiten kommen durch viele und große Grafikdateien zustande. Die Textinhalte sind meist schnell geladen. Wenn Sie Grafiken zur Navigation verwenden (nach oben, weiter, zurück), benutzen Sie immer die gleichen Grafiken, diese müssen dann nur einmal geladen werden. 

Ein Rechenbeispiel:
Eine Grafikdatei mit 100 kbyte Grösse hätte über ISDN eine minimale Ladezeit von 13 Sekunden. Nicht jeder hat einen ISDN-Anschluss, und die Übertragungsgeschwindigkeiten erreichen selten den theoretisch möglichen Wert. Für unsere Datei müssen Sie faktisch mit einer Ladezeit von einer halben bis zu einer Minute rechnen (das kommt Ihnen beim Surfen auf anderen Seiten doch auch ewig vor).
 

Text und die deutsche Sprache.
Machen Sie kurze, aussagekräftige Sätze. Niemand will umständlich komplizierte Anweisungen und Anleitungen lesen. 
Unterziehen Sie Ihre Seiten einer Rechtschreibprüfung! Alle Fehler bleiben an Ihnen hängen, und Sie können sich nicht verteidigen. Die Leute verschwinden von Ihrer Seite und kommen nie wieder. Ob Sie die Besucher mit Sie oder du anreden, hängt von der Besuchergruppe ab, die Sie ansprechen wollen. Eine Internet-Buchhandlung spricht ihre Kunden mit Sie an, der www.geizkragen.de natürlich mit du. 

Geben Sie Ihrer Seite einen Namen, und tragen Sie den Namen auch als Metatag ein!

Zur Navigation oder Menue.
Verwenden Sie aussagekräftige Bezeichnungen. "Home" hat sich für die Startseite eingebürgert. Wenn Sie einen Menuepunkt "Links" anbieten, ist jedem klar, was dahintersteckt - die Links müssen auf der Seite dann auch kommen und nicht Text über Sinn und Unsinn von Links oder warum Sie diese Auswahl und nicht eine andere getroffen haben. 
Ein Pfeil nach oben am Ende einer Seite macht nur Sinn, wenn die Seite so lang ist, dass man den Anfang nicht mehr sehen kann!
 

Beachten Sie für Links aus Ihrer Webpräsenz heraus die Möglichkeiten, die Anzeige der neuen Datei über das Attribut target zu steuern (siehe Lektion 4) .

 

Wenn Sie aktuell auf Ihrer Seite sein wollen, dann aber richtig:
Wen interessiert die Zeitung von gestern - wenn ein Termin vorbei ist, muss er auch von der Seite verschwinden. Wenn ich alte Termine sehe, weiss ich, dass niemand die Seite pflegt, was soll ich also da?

Feedback
Fordern Sie die Leute zu Teilnahme, Mitarbeit oder Kritik auf. Bieten Sie Kontakt per E-Mail an. Sie brauchen Feedback von den Besuchern. Sie erfahren nichts über Ihre Besucher, wenn sie nicht Kontakt zu Ihnen aufnehmen. Insbesondere bei kommerziellen Seiten müssen Sie Telefonnummer, Fax, Adresse und E-Mail angeben. Niemand will mit einer nichtsesshaften Firma Geschäfte machen. 

Inhalte
Kopieren Sie nicht andere Seiten: Das fällt früher oder später auf. Zeigen Sie, was in Ihnen steckt, seien Sie kreativ. Wenn Sie von anderen Seiten Inhalte übernehmen, können Sie auch einen Link dorthin einbauen. Bauen Sie keine Linklisten, schaffen Sie eigene Inhalte.

Bannersammlungen gibt es genug, Werbung will keiner. Also dezent. Wichtig sind Ihre Inhalte, nicht die Banner anderer. Die Besucher kommen doch zu Ihnen. Banner sind ladezeitintensiv.

Wenn Sie Ticker oder animierte Gifs einbinden - je mehr Bewegung auf dem Bildschirm, umso weniger Beachtung finden die statischen Elemente. Gehen Sie überlegt mit animierten und sich bewegenden Dingen um. 

Setzen Sie Java, Javascript nur dann ein, wenn es auch funktioniert. Prüfen Sie Ihre Seite wie oben beschrieben mit diversen Browsern und Bildschirmauflösungen. Wer liest gerne Fehlermeldungen aus Javascript?
Tipps zum Seitenlayout

Guter/schlechter Stil
Grelle Farben, Hintergründe die einen nervös machen, Textfarbe und Hintergrundfarbe passen optimal..... - Ein paar Beispiele:

Ich bin der Text. Können Sie mich sehen?
Tut weh, oder?

Superguter Kontrast

Gut für die Augen?

Wenn Sie mehr tolle Seiten sehen wollen: www.muellseite.de oder www.gutesites.de.

Textauszeichnungen
Wenn Sie Text unterstreichen, glaubt jedermann, es sei ein Hyperlink, der aber wohl nicht funktioniert.
Wenn Sie mit fett oder kursiv und mit Farben arbeiten, bitte sparsamst. Immer auf die Lesbarkeit des Textes achten. Keine Kombination aus fett und kursiv, eine Texthervorhebung reicht vollkommen aus. Schriftgrösse 2 oder 3 ist völlig ausreichend. Verwenden Sie Schriftgrösse 1 nur für das wirklich Kleingedruckte. Die Größe 4 können Sie noch für Überschriften verwenden.

Wenn Sie mit Wallpapers (Hintergrundbildern) arbeiten, wählen Sie eine kleine Datei. Wallpapers werden stets gekachelt. Wenn die Ladezeit sehr gross ist (weil die Datei gross ist), sieht der Betrachter zunächst weißen Hintergrund und wird plötzlich mit Ihrem Hintergrundbild erschreckt. Etwas Abhilfe verschafft folgender Trick: Wählen Sie als bgcolor im Body-Tag eine Farbe, die der Farbe der später anzuzeigenden Hintergrundgrafik sehr nahekommt. Die Hintergrundfarbe (bgcolor) wird vom Browser sehr schnell eingestellt, und der Kontrast ist beim Erscheinen des Hintergrundbildes nicht mehr so extrem. 

Hintergrund
Verwenden Sie für alle Seiten die gleiche Hintergrundfarbe bzw. das gleiche Hintergrundbild.

Text
Verwenden Sie stets die gleiche Schriftart und Farbe. Verwenden Sie Arial, Verdana, Helvetica, Times New Roman. Keine Exoten wie Tahoma Simpson Lynda cursiv (das sieht nur bei Ihnen so aus, wie es aussehen soll). Wenn ein Besucher diese Schriftarten nicht installiert hat, erscheint die Schriftart Times New Roman - und gerade die wollten Sie ja nicht haben.
Spielen Sie vorsichtig mit Textfarbe. Text ist zum Lesen da und sollte auch lesbar sein. Es ist ja toll, dass man jeden Buchstaben andersfarbig gestalten kann, aber wer soll das lesen können?

Arbeiten Sie immer mit Tabellen, um die Elemente Ihrer Seite zu positionieren. Das funktioniert am zuverlässigsten!

Anzahl und Größe der Objekte auf dem Bildschirm darf nicht den Eindruck der Überfüllung erwecken. Verteilen Sie Ihre Inhalte auf mehrere kurze Seiten. Geometrische Symbole wie Kreise und Linien haben stets die gleiche Strichart, Farbe und Breite. Menue-Buttons oder Texte haben immer die gleiche Position, Farbe und Layout! Übernehmen Sie die Anordung wiederkehrender Objekte und Textteile von Seite zu Seite. Dies erhöht den Wiedererkennungswert und schafft Vertrautheit.
Gestalten Sie die Seitenbreite so, dass kein waagerechter Scrollbalken am unteren Bildschirmrand erscheint (egal bei welcher Bildschirm-Auflösung). Vielen Surfern ist ein senkrechter Scrollbalken am rechten Rand schon lästig! Sehr lange Seiten sollten Sie vermeiden, packen Sie Ihre Inhalte auf mehrere kleine Seiten.
Farben und Gestaltung

Durch die Computergrafik kann mittels Farbgestaltung bewusst auf das Verhalten und die Reaktionen und Assoziationen des Betrachters Einfluss genommen werden. Die menschlichen Empfindungen beim Betrachten einer Farbe sind unterschiedlich. Blau wird den kalten Farben, Rot den warmen Farben zugeordnet. Rot symbolisiert Wärme, Feuer, mit der Farbe Blau werden Kälte, Eis assoziiert. Bilder, auch Teilbilder in hellen Farben, wirken leichter als dunkle Farbtöne. Bilder in hellen gesättigten Farben werden länger betrachtet als Bilder mit dunklen Farbtönen. 
Folgende Zuordnung von Gefühlen und Stimmungen sind in der Farbsymbolik üblich:
gelb: Optimismus, Wärme, Reife, Heiterkeit
rot: Dynamik, Gefahr, Temperament, Leidenschaft
orange: Freude, Ausgelassenheit, Spaß
blau: Ruhe, Zufriedenheit, Harmonie 
grün: Frische, Entspannung 
violett: Einsamkeit, Eitelkeit, Introvertiertheit
braun: Sinnlichkeit, Schwere, Bequemlichkeit
schwarz: Ablehnung, Trauer, Pessimismus
weiss: Sauberkeit, Reinheit, Leichtigkeit
grau: Neutralität, Elend, Trostlosigkeit

Berücksichtigen Sie diese Farbeigenschaften sowohl bei der Erstellung eigener Grafiken als auch bei der Auswahl Ihrer Buttonhintergrundfarbe und -beschriftungen sowie Text- und Texthintergrundfarben.
 
Farbzusammenstellung

Farbmodelle

RGB-Farbmodell:
Die einzelnen Farben werden aus den drei Grundfarben Rot, Grün und Blau zusammengesetzt. Siehe (Lektion 2).

HLS-Farbmodell:
Das Hue Luminance Saturation-Modell unterscheidet Farben bezüglich dem Farbton (hue), der Helligkeit (luminance) und der Sättigung (saturation). Der Farbton besagt, ob es sich um einen blauen, grünen oder gelben Farbton handelt. Der Grauanteil einer Farbe steckt in der Sättigung. Wird die Sättigung einer Farbe verringert, erhöht sich der Grauanteil. Ohne Sättigung erscheint jede Farbe grau. Eine hohe Sättigung bewirkt eine klare, reine Farbe. Ohne Helligkeit entsteht immer die Farbe Schwarz. Mit maximaler Helligkeit wird jede Farbe automatisch zu Weiß.

Arbeiten Sie mit wenigen, aber immer gleichen Farben. Wenn Sie viele Farben gleichzeitig einsetzen, erscheinen nicht einzelne Farben, das Ergebnis wird schlichtweg bunt. Darstellungen mit wenigen Farben sind kontrastreicher und es erleichtert das Hervorheben einzelner Worte oder Sätze. Gute Farbkontraste erreichen Sie durch Kombination von unterschiedlichen Helligkeitsgraden und Sättigungsgraden. Setzen Sie gesättigte Farben zu wenig gesättigten Farben, um einen guten Kontrast zu erreichen. 

Browser und Bildschirmtest

Nachdem Ihre Internetseiten mit den Inhalten (Grafik, Text, usw.) ausgestattet sind, müssen Sie Ihre Seite gründlich testen! Zwei Dinge sind besonders wichtig: 
- verschiedene Browser
- verschiedene Bildschirmauflösungen
- Umschalten der Bildschirmauflösung

Wenn Sie mit Netscape Composer oder Frontpage gearbeitet haben, ist es mit größter Wahrscheinlichkeit so, dass Tags in Ihre Seite eingebaut wurden, die nur von einem der beiden Standard-Browser richtig interpretiert werden! Testen Sie Ihre Seite mit beiden Browsern! Sie sollten mit Netscape in der Version 6.x und bei Microsoft mit Version 6.x testen. Wenn Sie mehrere Versionen des gleichen Browsers haben, testen Sie auch damit. 

Laut Statistik von webhits (www.webhits.de) surfen über 80% mit dem Internet Explorer und etwas über 10 % mit Netscape Browsern. Die fehlenden Prozente sind bunt gemischt. Versuchen Sie gute Resultate im Internet Explorer zu erreichen. In Opera und Netscape sollte Ihre Seite zumindest funktionieren und ein ähnliches Aussehen haben. 

Lassen Sie die Finger von Bemerkungen wie "diese Seite ist optimiert für ...." oder "optimale  Darstellung mit .... ". Sie geben doch damit zu, dass Sie es nicht können, sonst wäre diese Bemerkung nicht notwendig, da Ihre Seite mit jedem Browser optimal aussieht.
Webseiten werden für die Besucher optimiert, nicht für Microsoft!

Ein Tipp zum Test - wenn Sie mit Opera testen und es da gut klappt, dann sind die Ergebnisse mit den beiden anderen Browsern ebenfalls gut. 

Umschalten der Bildschirmauflösung
Unter Windows schalten Sie die Bildschirmauflösung so um:
-- Start -- Einstellungen -- Systemsteuerung -- Anzeige -- Einstellungen --
 

Wählen Sie: Weitere Optionen.

Wählen Sie -- Symbol in der Taskleiste anzeigen --
Durch diese letzte Einstellung wird das Umschalten der Auflösung einfacher. Klicken Sie einfach auf das Bildschirmsymbol rechts unten in Ihrer Taskleiste. Leider ist es noch nicht mit allen Grafikkarten möglich, die Auflösung ohne einen Neustart zu ändern. Führen Sie in diesem Fall alle Test zunächst mit allen Browsern und danach (nach dem Umschalten der Auflösung) nochmals durch.
Sollten Sie an diesem Punkt Schwierigkeiten haben, schicken Sie mir eine Mail.
 

Verschiedene Bildschirmauflösungen

Seit geraumer Zeit werden bei Neuanschaffungen von PCs 17"-Bildschirme verkauft. Die typischen Auflösungen für diesen Typ sind 800x600 und 1024x768. Diese Werte beziehen sich auf die Anzahl der Bildpunkte horizontal und vertikal. Mit einer Auflösung von 800 x 600 Pixel ergeben sich 800 Bildpunkte je Zeile (horizontal) und 600 Zeilen (vertikal) insgesamt.
Laut Statistik von webhits (www.webhits.de) werden ca. 86% aller Bildschirme mit diesen beiden Einstellungen betrieben. Für noch grössere Bildschirme eignen sich Einstellungen von 1152x864 und 1280x1024. Diese beiden zusammen belegen nochmals ca. 10%. Sie müssen Ihre Seite mit einer Bildschirmauflösung von 800x600 und 1024x768 Pixel testen!

Beispiel:

Das erste Bild entspricht einer Bildschirmauflösung von 1024x768 Pixel, das zweite Bild wurde mit 800 x 600 Pixel erzeugt. In beiden Darstellungen wurde die gleiche GIF-Datei eingebunden. Die Grafikdatei selbst hat eine Breite von 468 Pixel. Je nach Bildschirmauflösung belegt die Datei deutlich mehr/weniger als die halbe Bildschirmbreite.

Mit der größeren Bildschirmauflösung passt der umfliessende Text neben die Grafik.

Damit mit beiden Browsern ein ähnliches Erscheinungsbild erreicht wird, wird eine Tabelle mit einer Reihe und zwei Zellen erzeugt. In der linken Zelle befindet sich vertikal und horizontal zentriert die Grafik. Der Text steht in der zweiten Zelle.


 

Um in beiden Auflösungen das gleiche Erscheinungsbild zu erzeugen, muss der tatsächliche Anzeigebereich gleich groß sein. Es wird eine Tabelle mit einer Breite von 750 Pixel eingefügt. 

Durch diese Methode wird bei einer Auflösung von 1024 x 726 Pixel nicht der komplette Bildschirm genutzt. Die Darstellung der Objekte (Grafik und Text) am Bildschirm ist dafür identisch und nicht von der Bildschirmauflösung abhängig. Die Tabelle kann zusätzlich zentriert ausgerichtet werden, und der durch die Auflösungen bedingte Unterschied fällt kaum auf.

Sollten Sie mit Ihren Ergebnissen und der Darstellung nicht zufrieden sein - hier gibt's Tipps.
 

 
Download zum Server

Wenn Sie Ihre Tests auf Ihrem Rechner abgeschlossen haben, sollten Sie die Seiten ins Internet stellen und dort betrachten. Verwenden Sie dazu das von Ihrem Provider zur Verfügung gestellte Programm oder eines der FTP-Programme, die anfangs vorgestellt wurden.

Erscheinen alle Grafiken/Dateien? Funktionieren Ihre Hyperlinks? 
Falls nein, 

  • überprüfen Sie, ob die Datei sich in dem Ordner befindet, den Sie als Ziel mit Ihrem Hyperlink bzw. als <img src="..."> angegeben haben. 

    • Sie können auch einzelne Dateien im Internet direkt abrufen. 
    Auf meiner Seite befindet sich in dem Ordner "pic" die Datei "lernen.gif". Diese Datei wird mit www.LernenImInternet.de/pic/lernen.gif aufgerufen. Die Pfadangabe ist immer vom Typ www.Ihre_Internetadresse/ordner/dateiname.Endung
     
  • Stimmt der Dateiname? Überprüfen Sie den Pfadnamen. Ist die Dateiendung korrekt?

    • Groß-/Kleinschreibung beachten (was in der Windows-Welt funktioniert, klappt im Internet nicht immer).

    Enthält der Dateiname Sonderzeichen oder Umlaute?
    Erlaubt sind alphanumerische Zeichen - Buchstaben und Ziffern, keine Umlaute. Als Sonderzeichen nur den Bindestrich "-" und den Unterstrich "_" verwenden!

    Lautet die Datei-Endung htm oder html, jpg oder jpeg?
    Auf manchen älteren Servern sind nur Dateinamen mit maximal acht Zeichen zulässig (das ist die Ausnahme). Lesen Sie die Anleitung nochmals oder fragen Sie bei Ihrem Provider nach.
     

  • Ist die Grafikdatei eine gif- oder jpg-Datei? Verwenden Sie nur diese Formate. Andere Dateiformate werden vom MSIE gelegentlich dargestellt, obwohl nicht zulässig.

    •  
  • Beim Filetransfer kann es zu Fehlern kommen. Hat die Datei auf dem Server die gleiche Größe wie lokal auf Ihrem Rechner?

    •  
  • Wenn Sie alles überprüft haben und es wird immer noch nicht richtig angezeigt, lesen Sie nochmals die Anmerkungen zum Browser in Lektion 8.

    •  
  • Um zu überprüfen, ob Sie die aktuelle Version Ihrer Seite sehen, wählen Sie mit der rechten Maustaste "Quelltext anzeigen". Sie sollten nach erfolgreichem Download auch Ihre Änderungen sehen.
Lassen Sie keine Fehler auf Ihrer Seite, entfernen Sie stattdessen den nicht funktionierenden Hyperlink bzw. binden Sie die Grafik nicht ein. Nichts ist störender als ein Hyperlink, der in dem Fehler 404 (Error 404) endet, oder Grafiken, die nur aus einem Platzhalter bestehen.

vorige Lektion
nächste Lektion
Inhaltsverzeichnis nach oben

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben, schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.